<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理 - 美味餐厅</title>
    <!-- 引入Tailwind CSS -->
    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.css') }}">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/orders.css') }}">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7A00',
                        secondary: '#4CAF50',
                        neutral: {
                            100: '#F9F9F9',
                            200: '#E9E9E9',
                            300: '#DADADA',
                            400: '#BBBBBB',
                            500: '#999999',
                            600: '#777777',
                            700: '#555555',
                            800: '#333333',
                            900: '#1A1A1A',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-neutral-100 min-h-screen">
    <header class="bg-white shadow-sm py-4">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="text-primary text-2xl">
                        <i class="fa fa-cutlery" aria-hidden="true"></i>
                    </div>
                    <h1 class="text-xl font-bold">订单管理系统</h1>
                </div>
                <a href="{{ url_for('index') }}" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                    返回点餐页面
                </a>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <h2 class="text-2xl font-bold mb-6">当前订单</h2>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {% for order in orders %}
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
                <div class="p-4 border-b border-neutral-200 bg-neutral-50 flex justify-between items-center">
                    <div>
                        <h3 class="font-bold">订单 #{{ order.id[:8] }}</h3>
                        <p class="text-sm text-neutral-600">桌号: {{ order.table_number }} | 时间: {{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                    </div>
                    <span class="px-3 py-1 rounded-full text-sm font-medium
                                {% if order.status == 'pending' %}bg-yellow-100 text-yellow-800
                                {% elif order.status == 'completed' %}bg-green-100 text-green-800
                                {% else %}bg-red-100 text-red-800{% endif %}">
                        {{ order.status | capitalize }}
                    </span>
                </div>

                <div class="p-4">
                    <h4 class="font-medium mb-3 text-neutral-700">订单内容:</h4>
                    <ul class="space-y-2 mb-4">
                        {% for item in order.items %}
                        <li class="flex justify-between">
                            <span>{{ item.food_name }} x {{ item.quantity }}</span>
                            <span>¥{{ (item.price * item.quantity) | round(2) }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    <div class="border-t border-neutral-200 pt-3 flex justify-between items-center">
                        <span class="font-bold text-lg">总计: ¥{{ order.total_amount | round(2) }}</span>

                        <div class="flex space-x-2">
                            {% if order.status != 'completed' %}
                            <button class="update-status px-3 py-1 border border-secondary text-secondary rounded hover:bg-secondary hover:text-white transition-colors"
                                    data-order-id="{{ order.id }}" data-status="completed">
                                完成
                            </button>
                            {% endif %}

                            {% if order.status != 'cancelled' %}
                            <button class="update-status px-3 py-1 border border-red-500 text-red-500 rounded hover:bg-red-500 hover:text-white transition-colors"
                                    data-order-id="{{ order.id }}" data-status="cancelled">
                                取消
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="col-span-full text-center py-12 text-neutral-500">
                <i class="fa fa-file-text-o text-5xl mb-4 opacity-30"></i>
                <p class="text-lg">暂无订单</p>
            </div>
            {% endfor %}
        </div>
    </main>

    <script>
        // 更新订单状态
        document.querySelectorAll('.update-status').forEach(button => {
            button.addEventListener('click', async function() {
                const orderId = this.dataset.orderId;
                const status = this.dataset.status;
                const originalText = this.textContent;

                // 显示加载状态
                this.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 处理中';
                this.disabled = true;

                try {
                    // 发送请求更新订单状态
                    const response = await fetch(`/api/update-order/${orderId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ status: status })
                    });

                    const data = await response.json();

                    if (data.success) {
                        // 刷新页面以显示更新后的状态
                        window.location.reload();
                    } else {
                        alert('更新订单状态失败: ' + data.message);
                        this.textContent = originalText;
                        this.disabled = false;
                    }
                } catch (error) {
                    console.error('Error updating order status:', error);
                    alert('更新失败，请重试');
                    this.textContent = originalText;
                    this.disabled = false;
                }
            });
        });
    </script>
</body>
</html>
